/**
 * @author yz
 */
DesignPanel = function(config){

    this.codeString = '';
    
    this.mashupConfig = {};
    
    this.componentID = '';
    
    config.bodyStyle = "padding:5px;";
    
    DesignPanel.superclass.constructor.call(this, config);
}

Ext.extend(DesignPanel, Ext.Panel, {

    afterRender: function(){
    
        DesignPanel.superclass.afterRender.call(this);
        
        var drop = new Ext.dd.DropTarget(this.body, {
            designpanel: this,
            ddGroup: 'componentGroup',
            overClass: 'design-area-over',
            notifyDrop: function(src, e, data){
                Ext.fly(e.getTarget()).removeClass('design-area-over');
                this.designpanel.componentID = data.cdata.id;
                var configw = new Ext.Window({
                    designpanel: this.designpanel,
                    title: 'Config component - ' + data.cdata.name,
                    modal: true,
                    width: 500,
                    autoHeight: true,
                    defaults: {
                        border: false,
                        bodyStyle: 'padding:10px;background-color:#DFE8F6;font-size:10pt',
                        autoHeight: true,
                        autoWidth: true
                    },
                    buttons: [{
                        text: 'ok',
                        handler: function(){
							var cfg = {};
                            if (configw.items.getCount() > 1) {                            
                                configw.items.first().items.each(function(item, index, length){
                                    cfg[item.name] = item.getValue();
                                });         
                                
                            }
							configw.designpanel.setConfig(cfg);
                            configw.close();
                        }
                    }, {
                        text: 'cancel',
                        handler: function(){
                            configw.close();
                        }
                    }]
                });
                var id = data.cdata.id;
				var haveVariable = false;
                for (p in Mashuproom.components[id].variables) {
                    haveVariable = true;
                }
                if (haveVariable) {
                    configw.add({
                        xtype: 'form',
                        defaults: {
                            grow: true,
                            growMin: 80,
                            growMax: 300
                        }
                    });
                    for (p in Mashuproom.components[id].variables) {
                        var fieldObject = {};
                        switch (typeof(Mashuproom.components[id].variables[p])) {
                            case 'number':
                                fieldObject.xtype = 'numberfield';
                                break;
                            case 'string':
                                fieldObject.xtype = 'textfield'
                                break;
                            case 'boolean':
                                fieldObject.xtype = 'checkbox';
                                fieldObject.checked = Mashuproom.components[id].variables[p];
                                break;
                            default:
                                fieldObject.xtype = 'textfield'
                        }
                        fieldObject.fieldLabel = p;
                        fieldObject.value = Mashuproom.components[id].variables[p];
                        fieldObject.name = p;
                        configw.items.first().add(fieldObject);
                    }
                }
                configw.add({
                    html: Mashuproom.components[id].info
                });
                configw.show();
                return true;
            }
        });
        DesignPanel.drop = drop;
    },
    
    setConfig: function(cfg){
		if(!cfg.Width||!cfg.Height)
			return 1;
        this.mashupConfig = cfg;
        this.codeString = Mashuproom.components[this.componentID].getCodeString(cfg);
        this.fireEvent('afterconfigchange', cfg);
        this.setDisplayComponent(Mashuproom.components[this.componentID].name, cfg);
    },
    
    setDisplayComponent: function(name, config){
	
        if (this.items != undefined) {
            this.remove(this.items.first());
        }
        var c = new Ext.BoxComponent({
            autoEl: {
                html: name
            },
            width: config.Width,
            height: config.Height,
			style:"line-height:"+config.Height+"px;",
            cls: 'design-area-component'
        });
        
        this.add(c);
        
        this.doLayout();
        
    }
});

Ext.reg("mashuproom.designpanel", DesignPanel);
